<template>
    <view class="contribute_box">
        <view class="top"></view>
        <view class="info_overview_box">
            <view class="avatar">
                <image :src="contributeInfo.userRecruitVo.userHeaderImage" mode="widthFix"></image>
            </view>
            <view class="info_overview">
                <view class="name_info">{{contributeInfo.userRecruitVo.userNickname}}</view>
                <view class="all_info">
                    <view>
                        <text>投稿：</text>
                        <text class="state">{{contributeInfo.dynamicNum}}</text>
                    </view>
                    <view>
                        <text>总评论：</text>
                        <text class="state">{{contributeInfo.commentNum}}</text>
                    </view>
                    <view>
                        <text>获赞：</text>
                        <text class="state">{{contributeInfo.pickNum}}</text>
                    </view>
                    <view>
                        <text>被收藏：</text>
                        <text>{{contributeInfo.collectionNum}}</text>
                    </view>
                </view>
            </view>

        </view>
        <view class="info_box">
            <view class="single_info_box" v-for="(item,index) in contributeDatas" :key="index">
                <view class="title_box">
                    <view class="ava_box">
                        <view class="avatar">
                            <image class="userHeaderImg" :src="contributeInfo.userRecruitVo.userHeaderImage" mode="widthFix"></image>
                        </view>
                        <view class="name">{{contributeInfo.userRecruitVo.userNickname}}</view>

                        <image class="sexIcon" src="/static/icon/img_icon19.png@2x.png" mode="widthFix"></image>

                    </view>

                    <view class="single_date">
                        <text class="verify" v-show="isVerify">审核中...</text>
                        <image src="/static/icon/img_icon3.png@2x.png" mode="widthFix"></image>
                    </view>
                </view>
                <view class="single_collection">
                    <text class="single_collection_desc" @click="goOthersDetailpage(item.dynamicId)">{{item.dynamicDescribe}}</text>
                    <text class="single_collection_time">{{item.displayTime}}</text>
                </view>
                <view class="img_box">
                    <view class="single_img_box" v-for="(item1,index1) in item.dynamicImage" :key="index1">
                        <image :src="item1.dynamicImage" mode="widthFix"></image>
                    </view>
                </view>
                <view class="behavior_box" v-show="true">
                    <view class="single_behavior">
                        <view class="behavior_icon">
                            <image src="/static/icon/img_icon36.png@2x.png" mode="widthFix"></image>
                        </view>
                        <text class="num">{{item.collectionNum}}</text>
                    </view>
                    <view class="single_behavior">
                        <view class="behavior_icon">
                            <image src="/static/icon/img_icon5.png@2x.png" mode="widthFix"></image>
                        </view>
                        <text class="num comment_icon">{{item.commentNum}}</text>
                    </view>
                    <view class="single_behavior">
                        <view class="behavior_icon">
                            <image src="/static/icon/img_icon6.png@2x.png" mode="widthFix"></image>
                        </view>
                        <text class="num">{{item.pickNum}}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {

        data() {
            return {
                
                contributeDatas: [],
                contributeInfo: {
                    userRecruitVo: {
                        userHeaderImage: "",
                    }
                },
                isVerify:false,
                sexIconSrc: {
                    "男": "/static/icon/img_icon19.png@2x.png",
                    "女": "/static/icon/img_icon20.png@2x.png"
                }
            };
        },
        methods: {
            //去详情页
            goOthersDetailpage(id) {
                uni.navigateTo({
                    url: '/pages/contribute/details?id=' + id
                });
            },
            //请求我的投稿数据
            getContributeData() {
                const token = uni.getStorageSync('token');
                this.$request('/comic-time/personal/mydynamic', {
                    "pageNo": 1,
                    "pageTol": 5
                }, 'GET', {
                    'Authorization': token
                }).then(res => {
                    console.log("数据")
                    console.log(res)
                    this.contributeDatas = res.data
                });
            },
            //请求我的投稿情况数据
            getContributeInfo() {
                const token = uni.getStorageSync('token');
                this.$request('/comic-time/personal/mydynamicstaus', {}, 'GET', {
                    'Authorization': token
                }).then(res => {
                    console.log("情况")
                    console.log(res)
                    this.contributeInfo = res.data
                });
            }
        },
        mounted() {
            this.getContributeData()
            this.getContributeInfo()
        }
    }
</script>

<style lang="scss" scoped>
    $hign:calc(100vh - 44px);

    .contribute_box {
        box-sizing: border-box;
        width: 750rpx;
        height: $hign;
        background-color: #eeeeee;

        .top {
            width: 750rpx;
            height: 10rpx;
            background-color: #eeeeee;
        }

        .info_overview_box {
            width: 750rpx;
            height: 104rpx;
            background-color: #ffffff;
            border-bottom: 1rpx solid #e5e5e5;
            box-sizing: border-box;
            padding: 0 34rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .avatar {
                width: 61rpx;
                height: 61rpx;
                background-color: #1389cd;
                border: solid 1rpx #e5e5e5;
                border-radius: 50%;
                margin-right: 10rpx;
                overflow: hidden;

                image {
                    width: 61rpx;
                    // height: 61rpx;
                }
            }

            .info_overview {
                width: 580rpx;
                height: 61rpx;
                // background-color: #55aa7f;

                .name_info {
                    // width: 102rpx;
                    height: 25rpx;
                    font-family: PingFangSC-Medium;
                    font-size: 26rpx;
                    line-height: 25rpx;
                    color: #000000;
                    margin-bottom: 13rpx;
                }

                .all_info {
                    // width: 79rpx;
                    height: 23rpx;
                    font-family: PingFangSC-Light;
                    font-size: 24rpx;
                    line-height: 23rpx;
                    color: #333333;
                    display: flex;

                    .state {
                        margin-right: 58rpx;
                    }
                }
            }


        }

        .info_box {
            width: 750rpx;

            .single_info_box {
                width: 750rpx;
                // height: 408rpx;
                border-bottom: 1rpx solid #e5e5e5;
                background-color: #ffffff;
                box-sizing: border-box;
                padding: 30rpx 30rpx 0 30rpx;

                .title_box {
                    height: 77rpx;
                    width: 692rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .ava_box {
                        height: 77rpx;
                        // width: 246rpx;
                        display: flex;
                        // justify-content: space-between;
                        align-items: center;

                        .avatar {
                            width: 60rpx;
                            height: 60rpx;
                            background-color: #1389cd;
                            border-radius: 50%;
                            margin-right: 15rpx;
                            overflow: hidden;

                            .userHeaderImg {
                                width: 60rpx;
                                height: 60rpx;
                            }
                        }

                        .name {
                            height: 27rpx;
                            font-family: PingFangSC-Medium;
                            font-size: 28rpx;
                            line-height: 27rpx;
                            color: #000000;
                            margin-right: 10rpx;
                        }

                        .sexIcon {
                            height: 27rpx;
                            width: 27rpx;
                        }
                    }

                    .single_date {
                        // width: 111rpx;
                        height: 20rpx;
                        font-family: PingFangSC-Regular;
                        font-size: 20rpx;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 20rpx;
                        letter-spacing: 0rpx;
                        color: #999999;

                        .verify {
                            height: 23rpx;
                            margin-right: 50rpx;
                            font-family: PingFangSC-Regular;
                            font-size: 24rpx;
                            line-height: 23rpx;
                            color: #666666;
                        }

                        image {
                            width: 8rpx;
                        }
                    }
                }

                .single_collection {
                    height: 57rpx;
                    width: 692rpx;
                    font-family: PingFangSC-Regular;
                    font-size: 24rpx;
                    line-height: 48rpx;
                    color: #333333;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .single_collection_desc {
                        width: 450rpx;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .single_collection_time {
                        width: 186rpx;
                    }
                }

                .img_box {
                    // height: 222rpx;
                    width: 692rpx;
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    align-items: center;

                    .single_img_box {
                        width: 223rpx;
                        height: 222rpx;
                        background-color: #1389cd;
                        border-radius: 10rpx;
                        border: solid 1rpx #e5e5e5;
                        margin-bottom: 10rpx;
                        margin-right:10rpx;

                        image {
                            width: 223rpx;
                        }
                    }
                    .single_img_box:nth-child(3n){
                        margin-right:0rpx;
                    }
                }

                .behavior_box {
                    // height: 60rpx;
                    width: 692rpx;
                    display: flex;
                    justify-content: space-around;
                    // align-items: center;
                    // background-color: #aaaa7f;

                    .single_behavior {
                        font-family: PingFangSC-Regular;
                        font-size: 24rpx;
                        line-height: 48rpx;
                        display: flex;
                        color: #ff5858;

                        .behavior_icon {
                            margin-right: 10rpx;

                            image {
                                width: 25rpx;
                                height: 24rpx;
                            }
                        }

                        .comment_icon {
                            color: #666666;

                        }

                    }
                }
            }
        }
    }
</style>
